import { Table, Divider, Tag, message, Input, Modal } from 'antd';
import styles from './productList.css';
import {useState,useEffect} from 'react';
import Link from 'umi/link';
import {Button} from 'antd'
import {connect} from 'dva';
const { Search } = Input;

function productList(props) {
	window.scrollTo(0,0)
	const [visible,setVisible] = useState(false)
	let value1 ="";
	let value2 ="";
	let value3 ="";
	let value4 ="";
	let value5 ="";
	const handleCancel=()=>{
		setVisible(false)
		props.history.go(0)
	}	
	const [coss,setCoss] = useState(0)
	useEffect(() => { 
		const fetchData = async () =>props.dispatch({
			type: 'info/getProductCategories',
			payload: {
				page:1,
				name:'',
				per:10
			}
		}); 
		fetchData(); 
	}, [coss])
	const columns = [
		{
			title: '商品图片',
			dataIndex: 'image',
			render: text => <img src={text} style={{width:100,height:100}}/>,
		},
		{
			title: '商品id',
			dataIndex: 'key',
		},
		{
			title: '商品名称',
			dataIndex: 'name',
		},
	 
		{
			title: '操作',
			render: (text, record) => (
				<span>
					<a onClick={()=>props.dispatch({
						type:'info/getProductCategoriesInfo',
						payload:{
							id:record.key
						}
						}).then(()=>{
						setVisible(true)
					})}>修改</a>
					<Divider type="vertical" />
					<a onClick={()=>props.dispatch({
						type:'info/deleteProductCategoriesInfo',
						payload:{
							id:record.key
						}
						}).then(()=>{
							message.success('删除成功~');
							setCoss(() => {
							    return (coss+1);
							  })
						})
					}>删除</a>
				</span>
			),
		},
	];
	const data=[]
	for(let i=1;i<props.page+1;i++){
		props.productlist.map(item=>
		data.push({
			index:i,
			key: item._id,
			name: item.name,
			image:item.coverImg,
		}))
	}
	console.log(props.current,props.totalCount)
	const total={
      columns:columns,
      dataSource: data,
      pagination: {
        pageSize:10,
        current: props.current,
        total:props.totalCount,
        onChange: (page) => props.dispatch({
			type: 'info/getProductCategories',
			payload: {
				page,
				name:'',
				per:10
			}
		})
      }
    }
	
	const search=value=>{
		if(value!=''){
			props.history.push({pathname:'/home/searchProductFenLei',query:{id:value}})
			console.log(value)
		}
	}
	  
	return (
		<div className={styles.normal}>
			<h1 style={{position:'relative'}}>商品分类 <Link to="/home/addFenlei"><Button type='primary' style={{position:'absolute',right:0,top:10,lineHeight:1}}>新增分类商品</Button></Link></h1>
			<Search placeholder="请输入商品名称" onSearch={value =>search(value)} enterButton />
			<Table {...total}/>
			<Modal
			    title="修改"
			    visible={visible}
			    onOk={()=>props.dispatch({
					type:'info/editProductCategoriesInfo',
					payload:{
						id:props.id,
						name:value1.state.value,
						descriptions:value2.state.value,
						coverImg:value3.state.value,
						productId:value4.state.value,
						productCreatedAt:value5.state.value
					}
				}).then(()=>{
					setVisible(false)
					if(props.id){
						message.success('修改成功~')
						setCoss(() => {
							return (coss+1);
						})
						setTimeout(function() {
							props.history.go(0)
						},0);
					}
				})}
			    onCancel={handleCancel}
				okText="确认"
				cancelText="取消"
			>
			    商品名称:<Input defaultValue={props.productName} type="text" style={{height:40,margin:10}} ref={(val) =>value1 = val} />
			    商品描述:<Input defaultValue={props.productDesc} type="text" style={{height:40,margin:10}} ref={(val) =>value2 = val} />
			    商品图片:<Input defaultValue={props.productIamge} type="text" style={{height:40,margin:10}} ref={(val) =>value3 = val} />
				商品ID:<Input defaultValue={props.id} type="text" style={{height:40,margin:10}} ref={(val) =>value4 = val} />
				发布时间:<Input defaultValue={props.productCreatedAt} type="text" style={{height:40,margin:10}} ref={(val) =>value5 = val} />
			</Modal>
		</div>
	);
}
export default connect(state=>state.info)(productList)